<!DOCTYPE html>
<html lang="en">
<head xmlns:th="http://www.thymelenf.org"><!--声明html的命名空间-->
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">

    <script src="/js/jquery-3.7.1.min.js"></script>
    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">

</head>
<body>

<div class="container-fluid">

    <h1 style="text-align: center">学生信息表</h1>

    <!-- Button trigger modal 给弹出的对话画框一个id：addStudent-->
    <div  style="float: right; width: 110px">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addStudent" >
            新增学生信息
        </button>
    </div>

    <form class="form-inline">
        <div class="form-group" style="width: 240px">
            <label for="searchName" style="float: left">按姓名查询：</label>
            <input type="text" class="form-control" id="searchName" placeholder="请输入姓名" name="searchName" style="float: left">
        </div>
        <button type="button" class="btn btn-default btn-primary" onclick="searchByName();" style="float: left">查询</button>
    </form>

    <table class="table table-bordered" id="stuTable">

    </table>

</div>

<div class="modal fade" tabindex="-1" role="dialog" id="addStudent">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">学生信息</h4>
            </div>
            <div class="modal-body">

                <form id = "formStudent">

                    <input hidden="hidden" id="id" name="id"/><!--隐藏id-->
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" class="form-control" id="name" name = "name" placeholder="姓名">
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" class="form-control" id="password" name="password" placeholder="密码">
                    </div>
                    <div class="form-group">
                        <label for="sex">性别</label>
                        <select class="form-control" id="sex" name="sex">
                            <option value="0">未知</option>
                            <option value="1">男</option>
                            <option value="2">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="score">成绩</label>
                        <input type="text" class="form-control" id="score" name = "score" placeholder="成绩">
                    </div>
                </form>
                <!--表单结束-->

            </div>
            <div class="modal-footer">

                <button type="submit" class="btn btn-primary" onclick="saveStudent();">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /新增或更新学生信息对话框 -->

<script src="/plugins/bootstrap/bootstrap.min.js"></script>
<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/plugins/jqvalidate/jquery.validate.min.js"></script>
<script src="/plugins/jqvalidate/localization/messages_zh.min.js"></script>


<script type="text/javascript">

    function preAdd() {
        $("#id").val(0);//提示新增
    }

    //新增或更新学生信息
    function saveStudent(){

        var data=$("#formStudent").serialize();

        var id=$("#id").val();

        if(id < 1){
            //是新增
            $.ajax({
                url: "/webapi/student/insert",
                method:"post",

                data:data

            }).done(function (){

                $('#stuTable').bootstrapTable("destroy");//摧毁原来建的表格
                loadTable();
                $('#addStudent').modal('hide');//关闭对话框
            })
        }else{
            //是更新
            $.ajax({
                url: "/webapi/student/update",
                method:"put",

                data:data

            }).done(function (){

                $('#stuTable').bootstrapTable("destroy");//摧毁原来建的表格
                loadTable();
                $('#addStudent').modal('hide');//关闭对话框
            })
        }

    }

    //编辑学生信息
    function editStudent(id){

        $('#addStudent').modal('show');//点击编辑，先显示对话框

        $.ajax({

            url:"/webapi/student/get/" + id,
            method:'get'

        }).done(function (rs){

            $("#id").val(rs.id);//#id表示选中id
            $("#name").val(rs.name);
            $("#password").val("");
            $("#sex").val(rs.sex);
            $("#score").val(rs.score);
        })
    }

    //删除学生信息
    function deleteStudent(id){

        if (confirm("该操作将彻底删除此条信息！是否确定删除？")){

            $.ajax({

                url:"/webapi/student/delete/" + id,
                method:'delete'

            }).done(function (){
                $('#stuTable').bootstrapTable("destroy");//摧毁原来建的表格
                loadTable();
            })

        }//end if


    }

    //按名字查询学生信息
    function searchByName(){

        $('#stuTable').bootstrapTable("destroy");//摧毁原来建的表格
        loadTable();
    }



    //刷新界面
    function loadTable(){

        $('#stuTable').bootstrapTable({
            url: '/webapi/student/getbypage',
            striped: true,//设置为ture会有隔行变色效果
            pagination: true,//设置为true会在底部显示分页条
            singleSelect: false,//设置为true将会禁止多选
            pageSize: 3,//如果设置了分页，每页数据条数
            pageNumber: 1,//如果设置了分页，首页页数
            sidePagination: "server",//设置在哪里进行分页，可选参数有："client"或者"server"，这里设置在服务端进行分页
            queryParams: function (params) {

                var paraObj = {
                    size: params.limit,
                    page: params.offset/params.limit,
                    sort: "id",
                    direct: "desc",
                    name: $("#searchName").val()
                    //where:
                }

                // if (options.listParamsBefore) {
                //     options.listParamsBefore(paraObj);
                // }//一种包装代码
                return paraObj;
            },
            columns: [{
                field: 'id',
                title: '编号'
            }, {
                field: 'name',
                title: '姓名'
            }, {
                field: 'sex',
                title: '性别'
            }, {
                field: 'score',
                title: '成绩'
            }, {
                title: '操作',
                width: 100,
                formatter: function (value,row,index) {
                    var actions = [];
                    actions.push(
                        // '<a href="#" onClick="editStudent(\''  + row.id + '\');">编辑</a>',
                        // '<a href = "#" onclick = "deleteStuent(\'' + row.id + '\');">删除</a>'
                        "<a href='#' onclick='editStudent(" + row.id + ");'>编辑</a>",
                        "<a href='#' onclick='deleteStudent(" + row.id + ");'>删除</a>"
                    )
                    return actions.join("  ")
                }
            }]
        })

    }//end of loadTable

    //初次显示界面
    $(function (){

        $.validator.setDefaults({
            submitHandler: saveStudent
        });
        $().ready(function() {
// 在键盘按下并释放及提交后验证提交表单
            $("#formStudent").validate({
                rules: {
                    name: {
                        required: true,
                        minlength: 2,
                        maxlength: 40
                    },
                    password: {
                        required: true,
                        minlength: 9,
                        maxlength: 40
                    },
                    score: {
                        required: true,
                        range: [0,100]
                    }
                },
                messages: {
                    username: {
                        required: "请输入用户名",
                        minlength: "姓名长度不能小于2",
                        maxlength: "姓名长度不能大于40"
                    },
                    password: {
                        required: "请输入密码",
                        minlength: "密码长度不能小于 9 个字符",
                        maxlength: "密码长度不能大于 40 个字符"
                    }
                }
            });
        });

        loadTable();
    })
</script>
</body>
</html>